{extend name="public/base" /}
{block name='content'}
{include file='public/content_header' /}
<!--数据列表页面-->
<section class="content">
    <style>
        .left {
            text-align: left;
        }

        .right {
            text-align: right;
        }

        .left2 {
            float: left;
        }

        .right2 {
            float: right;
        }

        .show {
            display: block !important;
        }

        .hide {
            display: none !important;
        }
    </style>

    <div style="width: 100%;height: 100px;color: blue;cursor: pointer" onclick="fanhui()">返回</div>

    <div style="height:750px;overflow-y: scroll;">
        <div style="width:100%;text-align:center;margin-top:20px;margin-bottom:20px;font-size:20px">
            发送者：{$fromMember}， 状态：{$from.me_status_word} ，解封时间：{$from.me_status_time_word}
            <a data-id="{$fromUserId}" data-url="{:url('admin/famember/disableview')}" data-width="600px" data-height="400px" data-confirm="2"
               data-type="2" class="btn btn-warning btn-xs AjaxButton" title="封禁用户" data-title="封禁用户"
               data-toggle="tooltip">
                <i class="fa fa-circle"></i>
            </a>
            <a class="btn btn-success btn-xs AjaxButton" data-toggle="tooltip" title="解封用户"
               data-id="{$fromUserId}" data-confirm-title="解封用户确认"
               data-confirm-content='您确定要解除封禁融云ID为 <span class="text-red">{$fromUserId}</span> 的用户吗？'
               data-url="{:url('admin/famember/enable')}">
                <i class="fa fa-circle"></i>
            </a>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            接收者： {$toMember}， 状态：{$to.me_status_word} ，解封时间：{$to.me_status_time_word}
            <a data-id="{$toUserId}" data-url="{:url('admin/famember/disableview')}" data-width="600px" data-height="400px" data-confirm="2"
               data-type="2" class="btn btn-warning btn-xs AjaxButton" title="封禁用户" data-title="封禁用户"
               data-toggle="tooltip">
                <i class="fa fa-circle"></i>
            </a>
            <a class="btn btn-success btn-xs AjaxButton" data-toggle="tooltip" title="解封用户"
               data-id="{$toUserId}" data-confirm-title="解封用户确认"
               data-confirm-content='您确定要解除封禁融云ID为 <span class="text-red">{$toUserId}</span> 的用户吗？'
               data-url="{:url('admin/famember/enable')}">
                <i class="fa fa-circle"></i>
            </a>
        </div>
        <div style="width:100%; color:#0f4bac; font-size:14px; text-align:center;margin-top:20px;margin-bottom:20px;cursor: pointer;"
             onclick="jiazai()">加载更多
        </div>

        <div id="list">

        </div>


        <div style="width:100%; display:block; text-align:right;margin-top:20px;margin-bottom:20px;font-size:20px">
            {$toMember}
        </div>


    </div>
    <div id="tan"
         style="position:fixed;top:40%;left:47.5%;width: 300px; color: white; height: 100px;background-color: #000;opacity: 0.8; font-size: 20px; border-radius: 5px; text-align: center;line-height: 100px;display: none">
        数据加载中，请稍候!!
    </div>

</section>
<script>
    var page = 1;
    var tableData = []
    ajax_info(1)
    $("#tan").show();

    function ajax_info(page = 1) {
        $.ajax({
            url: "{:url('fachat/ajax_info')}",
            type: "POST",
            dataType: 'JSON',
            data: {"fromUserId": "{$fromUserId}", "toUserId": "{$toUserId}", "page": page},
            success: function (result) {
                console.log(result)
                var shuzu = result.data;
                if (tableData.length == 0) {
                    tableData = shuzu;
                } else {
                    tableData = shuzu.concat(tableData);
                }

                str = ""
                for (var i = 0; i < tableData.length; i++) {
                    var item = tableData[i]
                    var img = item.from_member.me_img
                    var from_me_uid = item.from_member.me_uid
                    var from_me_style = ''
                    var to_me_style = ''
                    if (from_me_uid != "{$from_me_uid}") {
                        from_me_style = 'none'
                    }

                    if (from_me_uid == "{$from_me_uid}") {
                        var class_name = 'left'
                        var biankuang = '<div style="border: 3px solid red;padding:5px;width:90%; margin-top:10px; margin-left:2%; position:relative; display:flex">\n';
                    } else {
                        var class_name = 'right'
                        var biankuang = '<div style="border: 3px solid green;padding:5px;width:90%; margin-top:10px; margin-left:2%; position:relative; display:flex">\n';
                    }

                    if (from_me_uid == "{$from_me_uid}") {
                        var class_name2 = 'left2'
                    } else {
                        var class_name2 = 'right2'
                    }

                    if (item.objectName == 'RC:ImgMsg') {
                        var content = item.content;
                        var message = '<div><a href="' + content + '" target="_blank"><img style="width: 40px; height: 40px" src="' + content + '" /></a></div>';
                    }else if(item.objectName == 'RC:HQVCMsg') {
                        var content = item.content;
                        var voice_to_text = item.voice_to_text;
                        var message = '<div><audio controls style="width: 250px; height: 40px" src="' + content + '" type="audio/aac"></audio><br/><span >'+ voice_to_text +'</span></div>';
                    } else {
                        var content = item.content;
                        var message = '<div class="' + class_name2 + '" style="width:40%;flex-wrap: wrap;">' + content + '</div>'
                    }

                    if (item.to_member.me_uid == "{$to_me_uid}") {
                        to_me_style = 'none'
                    }

                    var shijian = item.shijian

                    str += biankuang +
                        '        <div style="width:15%;margin-right:2%;text-align:right">\n' +
                        '\n' +
                        '            <img src="' + img + '" style="width:40px;height:40px;display: ' + from_me_style + '" >\n' +
                        '\n' +
                        '        </div>\n' +
                        '        <div style="width:70%;line-height:40px;height:auto;z-index:9;" class="' + class_name + '">\n' +
                        '\n' +
                        '\n' + message +
                        '\n' +
                        '        </div>\n' +
                        '        <div style="width:15%;margin-left:2%" >\n' +
                        '            <img src="' + img + '" style="width:40px;height:40px;display: ' + to_me_style + '" >\n' +
                        '        </div>\n' +
                        '\n' +
                        '        <div style="font-size:14px;z-index:1; line-height:40px;height:40px; opacity: 0.8; position:absolute;width:100%;text-align:center;left:0%;top:0%;color:#999">' + shijian + '</div>\n' +
                        '\n' +
                        '    </div>';
                }


                $("#list").html(str)
                $("#tan").hide();


            },fail(){
                $("#tan").hide();
            },complete(){
                $("#tan").hide();
            }

        })
        
    }


    function jiazai() {
        page++;
        $("#tan").show();
        ajax_info(page)
    }


    function fanhui() {
        var fromUserId = "{$fromUserId}";
        var toUserId = "{$toUserId}";
        //window.location.href="{:url('fachat/index')}?fromUserId="+fromUserId+"&toUserId="+toUserId;
        //window.location.href="{:url('fachat/index')}";
        window.location.href="{:url('fachat/index')}?fromUserId="+fromUserId
    }
</script>
{/block}